<template>
  <div class="content">
    <el-tabs v-model="activeName2" type="card">
      <el-tab-pane label="APP列表" name="first" class="filter-item">
        <el-button type="primary" style="margin-bottom: 16px;" plain @click="appAdd()">添加</el-button>
        <el-table :data="list" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="APP名称" prop="name"/>
          <el-table-column align="center" label="包名" prop="packageName"/>
          <el-table-column align="center" label="启动路径" prop="startUp"/>
          <el-table-column align="center" label="创建时间" prop="createdTime"/>
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="appEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="appDeleteF(scope.row.oid)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="课程" name="second">
        <el-form label-width="80px">
          <el-form-item label="课程名称">
            <el-input v-model="demo.course" icon="search" name="title" placeholder="请输入名字" style="width:200px"/>
            <el-button type="primary" style="margin-left: 14px;" @click = "curriculumList()">查询</el-button>
            <el-button type="primary" style="margin-left: 14px;" @click = "curriculumAdd">新增</el-button>
          </el-form-item>
          <el-table ref="multipleTable" :data="curriculumListData" border fit highlight-current-row style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column align="center" label="课程名称" prop="name"/>
            <el-table-column align="center" label="分类" prop="grade.label"/>
            <el-table-column align="center" label="课时数量" prop="lessonCount"/>
            <el-table-column align="center" label="创建时间" prop="createdTime"/>
            <el-table-column
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="curriculumEdit(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="CoursewareAdd(scope.row)">上传课程</el-button>
                <el-button type="text" size="small" @click="courseShow(scope.row)">查看</el-button>
                <el-button type="text" size="small" @click="curriculumDelete(scope.row.oid)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
              :page-size="10"
              :total="demo.coruseTotal"
              background
              layout="prev, pager, next"
              @size-change="handleSizeChangeCourse"
              @current-change="handleCurrentChangeCourse"/>
          </div>
          <div style="margin-top: 20px;">
            <el-button @click="toggleSelection(curriculumListData)">全选/反选</el-button>
            <el-button @click="toggleSelectionDeleteFun(curriculumListData)">删除</el-button>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="资料" name="third">
        <el-form label-width="80px">
          <el-form-item label="搜索资料">
            <el-select v-model="demo.appsMaterial" placeholder="请选择" style="width: 160px;" >
              <el-option
                v-for="item in appOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-button type="primary" style="margin-left: 14px;" @click = "materialList()">查询</el-button>
            <el-button type="primary" style="margin-left: 14px;" @click = "materialAdd">新增</el-button>
          </el-form-item>
          <el-table ref="materialTable" :data="materialData" border fit highlight-current-row style="width: 100%" @selection-change="handleSelectionChangeMaterial">
            <el-table-column type="selection" width="55"/>
            <el-table-column align="center" label="资料分类" prop="appModel.name"/>
            <el-table-column align="center" label="资料名称" prop="name"/>
            <el-table-column align="center" label="上传时间" prop="createdTime"/>
            <el-table-column
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="materialEdit(scope.row.oid)">编辑</el-button>
                <el-button type="text" size="small" @click="materialShow(scope.row.oid)">查看</el-button>
                <el-button type="text" size="small" @click="deleteMaterial(scope.row.oid)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <div class="page">
          <!-- <el-pagination
          background
          :page-size= "demo.materialSize"
          layout="prev, pager, next"
          :total="demo.materialTotal">
        </el-pagination> -->
          <el-pagination
            :page-size="10"
            :total="demo.materialTotal"
            background
            layout="prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
        <div style="margin-top: 20px;">
          <el-button @click="toggleSelectionMaterial(materialData)">全选/反选</el-button>
          <el-button @click="toggleSelectionDeleteMaterialFun(materialData)">删除</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :visible.sync="toggleSelectionDeleteDialog"
      :before-close="handleClose"
      title="批量删除课程"
      width="30%">
      <span>确定要删除选中的课程？</span>
      <input v-model="demo.oid" type="hidden" name="" value="">
      <input v-model="demo.courseDataList" type="hidden" name="" value="">
      <span slot="footer" class="dialog-footer">
        <el-button @click="toggleSelectionDeleteDialog = false">取 消</el-button>
        <el-button type="primary" @click="toggleSelectionDeleteHide()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="toggleSelectionDeleteMaterialDialog"
      :before-close="handleClose"
      title="批量删除资料"
      width="30%">
      <span>确定要删除选中的资料？</span>
      <input v-model="demo.oid" type="hidden" name="" value="">
      <input v-model="demo.materialDataList" type="hidden" name="" value="">
      <span slot="footer" class="dialog-footer">
        <el-button @click="toggleSelectionDeleteMaterialDialog = false">取 消</el-button>
        <el-button type="primary" @click="toggleSelectionDeleteMaterial()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="appDeleteDialog"
      :before-close="handleClose"
      title="删除app"
      width="30%">
      <span>确定要删除选中的app？</span>
      <input v-model="demo.oid" type="hidden" name="" value="">
      <input v-model="demo.appDataList" type="hidden" name="" value="">
      <span slot="footer" class="dialog-footer">
        <el-button @click="appDeleteDialog = false">取 消</el-button>
        <el-button type="primary" @click="appDeleteDialogHide()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import tabPane from '@/components/tabPane'
import axios from "axios";
import api from "@/api/upload";
import { Message } from "element-ui";
export default {
  data() {
    return {
      demoList: {
        name: "",
        code: "",
        value: "",
        lessonCount: ""
      },
      appOption: [],
      options: [
        {
          value: "0",
          label: "小班"
        },
        {
          value: "1",
          label: "中班"
        },
        {
          value: "2",
          label: "大班"
        }
      ],
      value: "",
      newForm: [],
      dialogVisible: false,
      activeName2: "first",
      list: [
        {
          mm: {
            nn: "mmmmm",
            kk: "3423",
            dd: "2323"
          },
          ii: "888"
        }
      ],
      curriculumListData: [],
      materialData: [],
      demo: {
        name: "",
        materialSearch: "",
        course: "",
        materialDataList: "",
        courseDataList: "",
        appDataList: "",
        appsMaterial: ""
      },
      pageSize: "",
      allSelect: false,
      multipleSelection: [],
      multipleSelectionMaterial: [],
      toggleSelectionDeleteMaterialDialog: false,
      toggleSelectionDeleteDialog: false,
      appDeleteDialog: false
    };
  },
  mounted() {
    this.appShow();
    this.curriculumList();
    this.materialList();
  },
  methods: {
    appDeleteF(tab) {
      this.appDeleteDialog = true;
      this.demo.appDataList = tab;
    },
    toggleSelectionDeleteFun(m) {
      this.toggleSelectionDeleteDialog = true;
      this.demo.courseDataList = m;
    },
    handleClose(done) {
      done();
    },
    toggleSelectionDeleteMaterialFun(materialData) {
      this.toggleSelectionDeleteMaterialDialog = true;
      this.demo.materialData = materialData;
    },
    toggleSelectionDeleteMaterial(rows) {
      this.toggleSelectionDeleteMaterialDialog = false;
      let selectedOidMaterial = [];
      this.multipleSelectionMaterial.map((item, index) => {
        selectedOidMaterial = selectedOidMaterial + "&ids=" + item.oid;
      });
      selectedOidMaterial = selectedOidMaterial.substr(1);
      api.materialBatchDelete(selectedOidMaterial).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "删除成功！",
          type: "success"
        });
        this.materialList();
      });
    },
    toggleSelectionDeleteHide(rows) {
      console.log(this.multipleSelection);
      this.toggleSelectionDeleteDialog = false;
      let selectedOid = [];
      this.multipleSelection.map((item, index) => {
        selectedOid = selectedOid + "&ids=" + item.oid;
      });
      selectedOid = selectedOid.substr(1);
      api.coruseBatchDelete(selectedOid).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "删除成功！",
          type: "success"
        });
        this.curriculumList();
      });
    },
    toggleSelectionMaterial(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.materialTable.toggleRowSelection(row, !this.allSelect);
        });
        this.allSelect = !this.allSelect;
      } else {
        this.$refs.materialTable.clearSelection();
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect);
        });
        this.allSelect = !this.allSelect;
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChangeMaterial(val) {
      this.multipleSelectionMaterial = val;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChangeCourse(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChangeCourse(val) {
      console.log(`当前页: ${val}`);
      const data = { name: this.demo.materialSearch };
      api.coursePage(val - 1, "10", data).then(response => {
        this.curriculumListData = response.content;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      const data = { name: this.demo.courseSearch };
      api.materialPage(val - 1, "10", data).then(response => {
        this.materialData = response.content;
      });
    },
    currentPage1() {
      console.log("1");
    },
    timeFormat(time) {
      var d = new Date(time);
      var times =
        d.getFullYear() +
        "-" +
        (d.getMonth() + 1) +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return times;
    },
    courseShow(tab) {
      this.$router.push("/CourseShow?oid=" + tab.oid);
    },
    appDeleteDialogHide() {
      this.appDeleteDialog = false;
      const appDataList = this.demo.appDataList;
      api.appDelete(appDataList).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "删除成功！",
          type: "success"
        });
        this.appShow();
      });
    },
    materialShow(tab) {
      console.log("1212");
      this.$router.push("materialShow?oid=" + tab);
    },
    materialEdit(tab) {
      this.$router.push("materialAdd?oid=" + tab);
    },
    deleteMaterial(tab) {
      console.log(tab);
      api.materialDelete(tab).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "删除成功！",
          type: "success"
        });
        this.materialList();
      });
    },
    userDelete(tab) {
      // axios.
    },
    materialAdd() {
      this.$router.push("materialAdd");
    },
    materialList() {
      const materialSearch = { appOid: this.demo.appsMaterial };
      api.materialList(materialSearch).then(response => {
        this.materialData = response.content;
        this.demo.materialSize = response.size;
        this.demo.materialTotal = response.totalElements;
        response.content.map((item, index) => {
          this.materialData[index].createdTime = this.timeFormat(
            item.createdTime
          );
        });
      });
    },
    curriculumDelete(tab) {
      api.courseDelete(tab).then(response => {
        this.curriculumList();
      });
    },
    curriculumList() {
      const courseSearch = { name: this.demo.course };
      api.courseList(courseSearch).then(response => {
        this.curriculumListData = response.content;
        this.demo.coruseSize = 20;
        this.demo.coruseTotal = response.totalElements;
        response.content.map((item, index) => {
          this.curriculumListData[index].createdTime = this.timeFormat(
            item.createdTime
          );
        });
        // this.curriculumListData.createdTime = timeFormat(response.content.createdTime)
      });
    },
    CoursewareAdd(tab) {
      this.$router.push(
        "/CoursewareAdd?oid=" +
          tab.oid +
          "&lessonCount=" +
          tab.lessonCount +
          "&name=" +
          tab.name
      );
    },
    curriculumEdit(tab) {
      this.$router.push("/curriculumEdit?oid=" + tab.oid);
    },
    curriculumAdd() {
      this.$router.push("/curriculumAdd");
    },
    appEdit(tab, event) {
      var path = "appEdit?oid=" + tab.oid;
      this.$router.push(path);
    },
    appAdd() {
      this.$router.push("/upload/appAdd");
    },
    handleClick(tab, event) {
      axios.delete("/app/" + tab).then(response => {
        this.appShow();
      });
    },
    appShow() {
      api.appList().then(response => {
        this.list = response;
        response.map((item, index) => {
          this.list[index].createdTime = this.timeFormat(item.createdTime);
          this.appOption.push({
            label: item.name,
            value: item.oid
          });
        });
      });
    }
  }
};
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
.content {
  margin-left: 30px;
  margin-top: 30px;
}
.page {
  margin-top: 8px;
}
</style>
